<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline timeSelect">
        <el-form-item label="开始时间">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="beginDate" ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="endDate"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        </el-form-item>
        <el-form-item class="AccountNum">
          账户余额：
          <span>1129.00</span>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" class="orderTable">
        <el-table-column prop="submitTime" label="提交时间" align="center" style="width:25%">
        </el-table-column>
        <el-table-column prop="money" label="金额" align="center" style="width:25%">
        </el-table-column>
        <el-table-column prop="reason" label="金额" align="center" style="width:25%">
        </el-table-column>
        <el-table-column prop="Account" label="账户余额（元）" align="center" style="width:25%">
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      beginDate:'',
      endDate:'',
      pageSize:100,
      totalCount:1000,
      tableData: [
        {
          submitTime: "2018-09-22  12:00:00",
          money: "-190.00",
          reason: "投放广告",
          Account: "12.000.00"
        },
        {
          submitTime: "2018-09-22  12:00:00",
          money: "-190.00",
          reason: "投放广告",
          Account: "12.000.00"
        }
      ]
    }
  },
  methods: {
    search(){

    },
    SizeChange(){

    },
    CurrentChange(){

    }
  }
}
</script>

<style>
.line {
  text-align: center;
}
.xian {
  height: 12px;
  background: #ff8b00;
  border-radius: 6px;
  margin-bottom: -6px;
  position: relative;
}
.timeSelect {
  padding: 20px 0;
}
.timeSelect .el-form-item__label {
  font-weight: normal;
  font-size: 16px;
  color: #989898;
}
.timeSelect .el-button--primary {
  color: #ffffff !important;
  background: #fd893e !important;
  border-color: #fd893e !important;
}
.AccountNum {
  font-size: 16px;
  color: #989898;
}
.AccountNum span {
  font-size: 30px;
  color: #ff7800;
  font-family: Arial;
}

@media screen and (max-width: 768px) {
  .xian {
    height: 4px;
    margin-bottom: -2px;
    border-radius: 2px;
  }
  .timeSelect {
    padding: 10px 0;
  }
}
</style>

